<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in data"
      :key="index"
      :timestamp="item.time"
      placement="top"
      color="#1890FF"
    >
      <div class="card">
        <span
          v-for="(item, index) in item.value"
          :key="index"
          class="span"
          :style="{ minWidth: item.width }"
        >
          {{ item.label }}：<span :style="{ color: item.color }">{{
            item.value
          }}</span></span
        >
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
export default {
  name: "CommonTimeline",
  props: {
    data: {
      type: Array,

      default: [
        // 基本数据格式  time为时间节点 label为字段名称  value为内容   width为列宽度 color设置value颜色
        // {
        //   time: c.time,
        //   value: [
        //     { label: "IP", value: c.visitIp },
        //     { label: "应用", value: c.appName, width: "300" },
        //     { label: "接口", value: c.apiUrl, width: "800" },
        //     { label: "访问状态", value: c.statusCode, color: "#fd0000" },
        //     {
        //       label: "访问涉敏类型",
        //       value: c.sensitiveNum,
        //       color: "#fd0000",
        //     },
        //   ],
        // },
      ],
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.card {
  height: 30px;
  border: 1px solid #cce3f2;
  background: #f5f9fe;
  padding: 0 8px;
  font-size: 14px;
  line-height: 30px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  .span {
    min-width: 200px;
  }
}
</style>
